<script setup lang="ts">
import ReplyList from '@/views/detail/components/comment/reply-list.vue'
import { userList } from '@/hooks/useList'
import commentApi from '@/service/api/comment'
import { timeAgo } from '@/utils'

type PropsState = {
  photoId?: number | string
}
const props = withDefaults(defineProps<PropsState>(), {
  photoId: ''
})
const emit = defineEmits(['reply'])
const getApi = async (params: any) => {
  const res = await commentApi.list(params)
  res.data.map(el => {
    el.replyList = []
    return el
  })
  return res
}
const { tableData, status, onBottom, onRefresh } = userList({
  apis: {
    getApi
  },
  initForm: {
    photoId: props.photoId,
    type: 4
  }
})
const { copy } = useClipboard()
const handShare = async (e: any) => {
  await copy(e.content)
  msgUtil.$message.success('已复制到剪切板')
}

const handLove = async (e: any) => {
  await commentApi.like({
    id: e.id,
    type: 1
  })
  if (e.isLike) {
    e.isLike = false
    e.like_count--
  } else {
    e.isPulsing = true
    e.isLike = true
    e.like_count++
  }
}

const handReply = (e: any, index: number) => {
  pushState.oneIndex = index
  emit('reply', {
    ...e,
    isMore: false
  })
}

const handReplyMore = (e: any, index: number) => {
  pushState.oneIndex = index
  pushState.commentId = e.id
  emit('reply', {
    ...e,
    isMore: true
  })
}
const commentLoad = async (item: any) => {
  const { data } = await commentApi.childer(item.id)
  const ids = deepClone(item.replyList).map(el => {
    return el.id
  })
  item.replyList = [
    ...item.replyList,
    ...data.filter((el: any) => !ids.includes(el.id))
  ]
}

const handCollapse = (item: any) => {
  item.replyList = []
}
const pushState = reactive({
  oneIndex: -1,
  commentId: -1
})
const replyPush = (data: any) => {
  const item = tableData.value[pushState.oneIndex]
  if (pushState.commentId === -1) {
    item.replyList.unshift(data)
  } else {
    const index = item.replyList.findIndex(el => el.id === pushState.commentId)
    if (index === item.replyList.length - 1) {
      item.replyList.push(data)
    } else {
      item.replyList.splice(index + 1, 0, data)
    }
  }
  item.reply_count++
  tableData.value[pushState.oneIndex] = item
}

onRefresh()
defineExpose({
  onRefresh,
  onBottom,
  replyPush
})
</script>

<template>
  <div class="empty" v-if="tableData.length === 0 && status === 'nomore'">
    <n-empty description="快来抢第一个沙发吧~"></n-empty>
  </div>
  <div class="comment-list">
    <div class="comment-card" v-for="(item, index) in tableData" :key="index">
      <img class="avatar" :src="item.userInfo.avatar" alt="" />
      <div class="info">
        <div class="name">{{ item.userInfo.nickname }}</div>
        <div class="content">{{ item.content }}</div>
        <div class="date">
          <span>{{ timeAgo(item.create_at) }}</span>
        </div>
        <div class="tool flex align-center">
          <div class="tool-item" @click="handReply(item, index)">
            <i class="esayIcon esayIcon-comment"></i>
            <span>回复</span>
          </div>
          <div class="tool-item" @click="handShare(item)">
            <i class="esayIcon esayIcon-fenxiang"></i>
            <span>分享</span>
          </div>
          <div class="tool-item" @click="handLove(item)">
            <template v-if="item.isLike">
              <i
                class="esayIcon esayIcon-aixin1 animate__animated"
                :class="[{ animate__rubberBand: item.isPulsing }]"
              ></i>
            </template>
            <template v-else>
              <i class="esayIcon esayIcon-aixin"></i>
            </template>
            <span>{{ item.like_count }}</span>
          </div>
        </div>
        <div
          class="unfold"
          v-if="item.reply_count > 0 && item.replyList.length === 0"
          @click="commentLoad(item)"
        >
          <span class="line"></span>
          <div class="unfold-row">
            <span>
              展开{{ item.reply_count - item.replyList.length }}条回复
            </span>
            <i class="esayIcon esayIcon-xiangxia2"></i>
          </div>
        </div>
        <reply-list
          :list="item.replyList"
          @reply="handReplyMore($event, index)"
        />
        <div
          class="collapse"
          v-if="
            item.reply_count > 0 && item.reply_count === item.replyList.length
          "
          @click="handCollapse(item)"
        >
          <span>收起</span>
          <i class="esayIcon esayIcon-xiangxia2"></i>
        </div>
      </div>
    </div>
    <div class="loading" v-if="status === 'loading'">
      <span>加载中...</span>
    </div>
  </div>
</template>

<style scoped lang="scss">
.empty {
  padding: 20px 0;
}

.loading {
  display: flex;
  justify-content: center;
  padding: 20px 0;
  font-size: 13px;
}

.comment-card {
  display: flex;
  padding: 10px 0;

  .avatar {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 50%;
    margin-right: 10px;
  }

  .info {
    flex: 1;

    .name {
      font-size: 13px;
      color: rgba(255, 255, 255, 0.95);
      font-weight: 500;
    }

    .content {
      font-size: 15px;
      color: #fff;
      margin-top: 4px;
    }

    .date {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.6);
      margin-top: 4px;
    }

    .tool {
      margin-top: 8px;
      gap: 12px;

      .tool-item {
        display: flex;
        align-items: center;
        cursor: pointer;
        position: relative;

        i {
          font-size: 16px;
          color: rgba(255, 255, 255, 0.6);
          margin-right: 4px;
        }

        .esayIcon-aixin1 {
          color: #ff0033;
        }

        span {
          font-size: 12px;
          color: rgba(255, 255, 255, 0.6);
        }

        &:hover {
          i {
            color: #fff;
          }

          .esayIcon-aixin1 {
            color: #ff0033;
          }

          span {
            color: #fff;
          }
        }
      }
    }

    .collapse {
      display: flex;
      align-items: center;
      gap: 4px;
      cursor: pointer;

      span {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.6);
      }

      i {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.6);
        transform: rotate(180deg);
      }

      &:hover {
        span,
        i {
          color: #fff;
        }
      }
    }

    .unfold {
      display: flex;
      align-items: center;
      gap: 4px;
      margin-top: 8px;

      .line {
        width: 24px;
        height: 1px;
        background-color: rgba(255, 255, 255, 0.6);
      }

      .unfold-row {
        display: flex;
        align-items: center;
        gap: 4px;
        cursor: pointer;

        span {
          font-size: 12px;
          color: rgba(255, 255, 255, 0.6);
        }

        i {
          font-size: 12px;
          color: rgba(255, 255, 255, 0.6);
        }

        &:hover {
          span,
          i {
            color: #fff;
          }
        }
      }
    }
  }
}
</style>
